<template>
    <div class="add-question-wrap">
        <p>已选择人数：<span class="select-num">{{ selectUserData.length }}</span></p>
        <el-row type="flex" justify="space-between">
            <el-form class="serach-form" ref="searchForm" :model="searchForm" :inline="true" @submit.native.prevent>
                <el-form-item>
                    <el-input
                        placeholder="搜索用户名"
                        v-model="searchForm.content"
                        @keyup.enter.native="getUserData(1, 10)"
                        clearable>
                    </el-input>
                </el-form-item>
                <el-form-item>
                    <el-button class="form-search-btn" type="primary" @click="getUserData(1, 10)">查询</el-button>
                </el-form-item>
            </el-form>
        </el-row>
        <el-row type="flex">
            <el-col :span="10">
                <el-table
                    class="examinee-table"
                    v-loading="loading"
                    border
                    ref="examineeTable"
                    :data="examineeData"
                    style="width: 100%"
                    @selection-change="examineeSelectionChange">
                    <el-table-column type="selection" width="50"></el-table-column>
                    <el-table-column label="用户名" prop="name"></el-table-column>
                </el-table>
                <el-pagination
                    background
                    small
                    @current-change="handleCurrentChange"
                    @size-change="handleSizeChange"
                    :current-page.sync="currentPage"
                    :page-sizes="[10, 50, 100]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
                </el-pagination>
            </el-col>
            <el-col class="move-btn-wrap" :span="4">
                <el-button @click="joinSelectList">加入右侧<i class="el-icon-d-arrow-right"></i></el-button>
                <el-button @click="removeSelectList"><i class="el-icon-d-arrow-left"></i>加入左侧</el-button>
            </el-col>
            <el-col :span="10">
                <el-table
                    border
                    ref="selectUserTable"
                    :data="selectUserData"
                    style="width: 100%"
                    max-height="530"
                    @selection-change="handleSelectionChange">
                    <el-table-column fixed type="selection" width="50"></el-table-column>
                    <el-table-column label="用户名" prop="name"></el-table-column>
                </el-table>
            </el-col>
        </el-row>
    </div>
</template>
<script>
import { getUsers } from '@/api/api'
import { getExamInfo } from '@/api/exam'


export default {
    name: 'AddExaminee',
    props: {
        examId: {
            default() {
                return ''
            }
        }
    },
    data() {
        return {
            firstLoad: true,
            searchForm: {
                content: ''
            },
            examineeData: [], // 人员数据
            // 分页
            currentPage: 1,
            pageSize: 10,
            total: 0,
            selectUserData: [], // 已选择人员
            table1Select: [], // 人员库中预勾选的人员
            table2Select: [], // 已选择人员中预勾选的人员
        }
    },
    created() {
        // 如果是编辑
        if(this.examId) {
            this.getUserData(1, 10, this.getSelectedData)
        } else {
            this.getUserData(1, 10)
        }
    },
    methods: {
        // 获取已选择人员
        getSelectedData() {
            let that = this
            // 获取已选择的题目信息
            getExamInfo({
                id: that.examId
            }).then(res => {
                if(res.status === 200) {
                    that.selectUserData = res.data.examAccountsInfo
                    // 已选择的进行选中标记
                    that.$nextTick(() => {
                        that.examineeData.forEach(row => {
                            that.selectUserData.forEach(item => {
                                if(row.accountName == item.account) {
                                    that.$refs.examineeTable.toggleRowSelection(row)
                                }
                            })
                        })
                    })
                }
            })
        },
        // 获取人员数据
        getUserData(pageIndex, pageSize, callback) {
            let that = this
            let loadingInstance = false
            // 是否第一次加载
            if(!that.firstLoad) {
                // 不是第一次加载采用服务的loading方式
                loadingInstance = this.$loading({
                    target: '.examinee-table',
                })
            } else {
                that.loading = true
                that.firstLoad = false
            }
            
            if (pageIndex) {
                that.currentPage = pageIndex
            }
            if (pageSize) {
                that.pageSize = pageSize
            }
            
            getUsers({
                account: that.$store.state.userinfo.accountName, // 当前登录账号
                name: that.searchForm.content,
                roleIds: '142,143,144,145,146,147,153,158,160,172,177',
                pageIndex: that.currentPage - 1,
                pageSize: that.pageSize,
                queryType: 1
            }).then(res => {
                if(res.status === 200) {
                    that.examineeData = res.data
                    that.total = res.total
                    // 如果是编辑
                    if(callback) {
                        callback()
                    } else {
                        // 已选择的进行选中标记
                        that.$nextTick(() => {
                            that.examineeData.forEach(row => {
                                that.selectUserData.forEach(item => {
                                    if(row.accountName == (item.accountName || item.account)) {
                                        that.$refs.examineeTable.toggleRowSelection(row)
                                    }
                                })
                            })
                            if (loadingInstance) {
                                loadingInstance.close()
                            } 
                        })
                    }
                } else {
                    if (loadingInstance) {
                        loadingInstance.close()
                    }
                }
                that.loading = false
            })
        },
        handleSizeChange(pageSize) {
            this.getUserData(1, pageSize)
        },
        handleCurrentChange(currentPage) {
            this.getUserData(currentPage)
        },
        // 人员库表格勾选的数据变化
        examineeSelectionChange(val) {
            this.table1Select = val
        },
        // 已选择人员表格勾选的数据变化
        handleSelectionChange(val) {
            this.table2Select = val
        },
        // 加入选择列表中
        joinSelectList() {
            let newArr = $.extend([], this.selectUserData)
            // 去除已添加过的人员
            this.table1Select.forEach(obj => {
                let hasSelect = false
                newArr.forEach(item => {
                    if(obj.accountName == (item.accountName || item.account)) {
                        hasSelect = true
                    }
                })

                if(!hasSelect) {
                    newArr.push(obj)
                }
            })
            this.selectUserData = newArr
        },
        // 移除选择列表中
        removeSelectList() {
            let newArr = []
            let selectedList = this.selectUserData
            let willRemoveList = this.table2Select
            
            for(let i=0, len=selectedList.length; i < len; i++) {
                let needRemove = false
                for(let j=0, num=willRemoveList.length; j < num; j++) {
                    if((selectedList[i].accountName || selectedList[i].account) == (willRemoveList[j].accountName || willRemoveList[j].account)) {
                        needRemove = true
                    }
                }
                if(!needRemove) {
                    newArr.push(selectedList[i])
                }
            }
            // 重新设置已勾选试题
            this.selectUserData = newArr
            // 清空勾选的试题
            this.table2Select = []
        },
        // 获取数据
        getData() {
            let selectList = this.selectUserData
            // 校验配置题数是否正确
            if(selectList.length > 0) {
                let newArr = []

                for(let i=0, len=selectList.length; i < len; i++) {
                    newArr.push(selectList[i].accountName || selectList[i].account)
                }
                return newArr || []
            } else {
                this.$message.warning('请选择考试人员')
                return false
            }
        }
    },
}
</script>
<style lang="scss" scoped>
.add-question-wrap {
    .select-num {
        margin-left: 10px;
    }
    .move-btn-wrap {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        .el-button {
            margin-left: 0;
            margin-bottom: 10px;
        }
    }
}
</style>
